<template>
	<div>
		<div class="manage-info wallet-page">
			<div class="manage-name">账户余额</div>
			<div class="manage-balance">
				<a>¥</a><span class="manage-balance-value">{{walletMoney/100}}</span>
				<span class="wallet-charge">充值</span>
			</div>
		</div>
		<div class="manage-date-select">
			<label>资金记录时间：</label>
			<span>
				<el-date-picker
			      v-model="value7"
			      type="datetimerange"
			      align="right"
			      placeholder="选择日期范围"
			      @change="setTime"
			      :picker-options="pickerOptions2">
			    </el-date-picker>
			</span>
			<span class="shelves-filter-btn-default shelves-filter mar-left-10" @click="timeInit">查询</span>
			<span class="font-color-green mar-left-10 special-bg" @click="download">导出Excel</span>
		</div>
		<div>
			<el-table
		    :data="tableData"
		    border
		    empty-text
		    style="width: 100%">
		    <el-table-column
		      prop="orderSn"
		      label="订单号">
		    </el-table-column>
		    <el-table-column
		      prop="createTime"
		      label="时间"
		      width="200">
		    </el-table-column>
		    <el-table-column
		      label="出账"
		      width="120">
		      <template scope="scope">
		      		<div>{{scope.row.outMoney/100}}</div>
		      </template>
		    </el-table-column>
		    <el-table-column
		      label="入账"
		      width="120">
		      <template scope="scope">
		      		<div>{{scope.row.inMoney/100}}</div>
		      </template>
		    </el-table-column>
		    <el-table-column
		      prop="comment"
		      label="描述">
		    </el-table-column>
		    <el-table-column
		      label="可用余额"
		      width="120">
		      <template scope="scope">
		      		<div>¥{{scope.row.surplusMoney/100}}</div>
		      </template>
		    </el-table-column>
		  </el-table>
		</div>
		<div class="block">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :current-page.sync="pageNum" :total="total" :page-size="pageSize"></el-pagination>
		</div>
	</div>
</template>
<script>
	import store from '../store/index.js'
	import {walletInfo, walletDownload} from '../config/interface.js'
	import {toast} from '../util/tool.js'
	import {fetch} from '../config/fetch.js'

	export default{
		data(){
			return {
				pickerOptions2: {
		          	shortcuts: [{
			            text: '最近一周',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			              picker.$emit('pick', [start, end]);
			            }
		          	}, {
			            text: '最近一个月',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			              picker.$emit('pick', [start, end]);
			            }
		          	}, {
			            text: '最近三个月',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			              picker.$emit('pick', [start, end]);
			            }
		          	}]
		        },
		        value7: '',
				userId: store.state.userId,
				walletMoney: '',
				endTime: '',
				startTime: '',
				tableData: [],
				pageSize: 10,
				pageNum: 0,
				total: 0,
			}
		},
		mounted(){
			this.init();
		},
		methods: {
			init(){
				var data = {
					endTime: this.endTime,
					startTime: this.startTime,
					userId: this.userId,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				};
				var url = walletInfo;
				fetch(url, data)
				.then(res => {
					this.walletMoney = res.data.money;
					var list = res.data.listAppJournal;
					if(this.total == 0){
						this.total = res.data.count;
					}
					var arr = [];
					for(var i = 0; i < list.length; i++){
						var opt = {
							createTime: list[i].createTime,
							comment: list[i].comment,
							inMoney: '',
							outMoney: '',
							orderSn: list[i].orderSn,
							surplusMoney: list[i].surplusMoney
						};
						if(list[i].type == "+"){
							opt.inMoney = list[i].type + list[i].money;
						}else{
							opt.outMoney = list[i].type + list[i].money;
						}
						arr.push(opt);
					}
					this.tableData = arr;
                });
			},
			timeInit(){
				this.total = 0;
				this.init();
			},
			setTime(val){
				this.startTime = val.substring(0, 19);
				this.endTime = val.substring(22, 42);
			},
			handleCurrentChange(val){
				this.pageNum = val;
		        this.init();
			},
			download(){
				if(this.startTime == ''||this.endTime == ''){
					var str = "请先选择时间";
	                toast(str, 2, false);
	                return;
				}
				const data = {
					endTime: this.endTime,
					startTime: this.startTime,
					userId: this.userId
				};

				const url = walletDownload;

				fetch(url, data)
				.then(res => {
					console.log(res);
				})
			}
		}
	}
</script>
<style>
	
</style>